<template>
  <div>
    <Card dis-hover>
      <p slot="title">关联相关商品</p>
      <a href="#" slot="extra" @click.prevent="goBack"> 关闭 </a>
      <Row
        type="flex"
        style="
          flex-wrap: wrap;
          width: 900px;
          margin-bottom: 16px;
          position: relative;
        "
      >
        <Col class="colclass">商品名称： {{ productName }}</Col>
        <Col class="colclass">分类：{{ categoryPath }}</Col>
        <Col class="colclass">SPU编码： {{ spuNo }}</Col>
        <Col class="colclass">SKU编码： {{ skuNo }}</Col>
        <Col class="colclass">商品品牌： {{ brandName }}</Col>
      </Row>
      <div class="tableTitle">
        <Row type="flex" justify="space-between">
          <Col>关联相关商品</Col>
          <Row type="flex">
            <Button
              type="primary"
              style="margin-left: 8px"
              @click="relByConditionBt"
              >关联
            </Button>
          </Row>
        </Row>
      </div>
      <Table border :columns="columns1" :data="baseTableData">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="info" size="small" @click="deleteProductBt(row)"
            >删除</Button
          >
        </template>
      </Table>
      <div class="ivu-mt ivu-text-center">
        <Page
          :total="totalNum"
          show-total
          show-sizer
          transfer
          :current.sync="nowPage"
          @on-change="getRelByCondition"
          @on-page-size-change="handleChangePage"
        />
      </div>
    </Card>
    <Modal
      v-model="modal1"
      width="1000"
      title="关联商品"
      okText="关联"
      cancelText="取消"
      @on-ok="guanlian"
      @on-cancel=""
    >
      <Row>
        <Form ref="searchData" :model="searchData">
          <Row>
            <Col span="8">
              <FormItem label="商品名称" :label-width="95" prop="productName">
                <Input
                  v-model="searchData.productName"
                  placeholder="请输入商品名称"
                ></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="SPU编码" :label-width="95" prop="spuCode">
                <Input
                  v-model="searchData.spuCode"
                  placeholder="请输入SPU编码"
                ></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="SKU编码" :label-width="95" prop="skuCode">
                <Input
                  v-model="searchData.skuCode"
                  placeholder="请输入SKU编码"
                ></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Row>
      <Row type="flex" justify="center" style="margin-bottom: 10px">
        <Button @click="resetButton('reset')" style="margin-right: 10px"
          >清空</Button
        >
        <Button type="primary" @click="searchButton('')">查询</Button>
      </Row>
      <Table
        ref="table"
        border
        :columns="columns2"
        :data="relByConditionTableData"
        @on-selection-change="tableSelectChage"
      />
      <div class="ivu-mt ivu-text-center">
        <Page
          :total="totalNum1"
          show-total
          show-sizer
          :current.sync="nowPage1"
          @on-change="getNotRelByCondition"
          @on-page-size-change="handleChangePage1"
        />
      </div>
    </Modal>
  </div>
</template>

<script>
import { ApiRequest } from '@api/basePage';

export default {
  components: {},
  data () {
    return {
      searchData: {
        productName: '', // 商品名称
        spuCode: '', // SPU编码
        skuCode: '' // SKU编码
      },
      modal1: false,
      columns1: [
        {
          title: '商品状态',
          key: 'stateStr',
          width: 120
        },
        {
          title: '分类',
          key: 'categoryPath'
        },
        {
          title: 'SPU编码',
          key: 'spuNo'
        },
        {
          title: 'SKU编码',
          key: 'skuNo'
        },
        {
          title: '商品名称',
          key: 'productName'
        },
        {
          title: '销售属性',
          key: 'specDetailStr'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      columns2: [
        // 关联商品橱窗
        {
          type: 'selection',
          width: 60,
          fixed: 'left'
        },
        {
          title: '商品状态',
          key: 'stateStr'
        },
        {
          title: '分类',
          key: 'categoryPath'
        },
        {
          title: 'SPU编码',
          key: 'spuNo'
        },
        {
          title: 'SKU编码',
          key: 'skuNo'
        },
        {
          title: '商品名称',
          key: 'productName'
        },
        {
          title: '销售属性',
          key: 'specDetailStr'
        }
      ],
      baseTableData: [],
      relByConditionTableData: [],
      skuNos: [],
      nowPage: 1,
      pageShow: 10,
      totalNum: 1,
      nowPage1: 1,
      pageShow1: 10,
      totalNum1: 1,
      uuid: '',
      productUuid: '',
      skuNo: '',
      productName: '',
      categoryPath: '',
      spuNo: '',
      brandName: '',
      type: '3' // 类型 1相同 2 成套 3 相关
    };
  },
  mounted () {},
  created () {
    this.uuid = this.$route.query.uuid;
    this.productUuid = this.$route.query.productUuid;
    this.skuNo = this.$route.query.skuNo;
    this.getConfigData();
    this.initData();
    this.getRelByCondition();
  },
  methods: {
    // 查询
    searchButton () {
      this.nowPage1 = 1;
      this.pageShow1 = 10;
      this.getNotRelByCondition();
    },
    // 重置
    resetButton (type) {
      if (type == 'reset') {
        this.$refs['searchData'].resetFields();
      }
      this.nowPage1 = 1;
      this.pageShow1 = 10;
      this.searchData.productName = '';
      this.searchData.spuCode = '';
      this.searchData.skuCode = '';
      this.getNotRelByCondition();
    },
    getConfigData () {
      this.pagePath = this.$route.path;
      let dynamicData = require('./configjs/relatedGoodsManageList').default;
      this.requestApi = dynamicData.requestApi; // 页面所需接口集合
      this.$set(this.$data, 'dynamicData', dynamicData);
    },
    initData () {
      let data = {
        skuNo: this.skuNo
      };
      // 开始请求商品列表
      ApiRequest(
        this.requestApi.baseGetModelBySkuNo.url + '?skuNo=' + this.skuNo,
        this.requestApi.baseGetModelBySkuNo.type,
        data
      ).then((res) => {
        if (res.retStatus === '1') {
          this.productName = res.retData.m.productName;
          this.categoryPath = res.retData.m.categoryPath;
          this.skuNo = res.retData.m.skuNo;
          this.spuNo = res.retData.m.spuNo;
          this.brandName = res.retData.m.brandName;
        }
      });
    },
    // 获取关联商品数据
    getRelByCondition () {
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        skuNo: this.skuNo,
        type: this.type // 类型 1相同 2 成套 3 相关
      };
      // 开始请求商品列表
      ApiRequest(
        this.requestApi.getRelByCondition.url +
          '?skuNo=' +
          this.skuNo +
          '&type=' +
          this.type +
          '&nowPage=' +
          this.nowPage +
          '&pageShow=' +
          this.pageShow,
        this.requestApi.getRelByCondition.type,
        data
      ).then((res) => {
        if (res.retStatus === '1') {
          this.baseTableData = res.retData.results;
          this.totalNum = res.retData.totalNum;
        }
      });
    },
    // 获取未关联商品数据
    getNotRelByCondition () {
      let data = {
        nowPage: this.nowPage1,
        pageShow: this.pageShow1,
        skuNo: this.skuNo,
        type: this.type, // 类型 1相同 2 成套 3 相关
        productName: this.searchData.productName, // 商品名称
        spuNo: this.searchData.spuCode, // SPU编码
        searchSkuNo: this.searchData.skuCode // sku编码
      };
      // 开始请求商品列表
      ApiRequest(
        this.requestApi.getNotRelByCondition.url +
          '?skuNo=' +
          this.skuNo +
          '&type=' +
          this.type +
          '&nowPage=' +
          this.nowPage1 +
          '&pageShow=' +
          this.pageShow1,
        this.requestApi.getNotRelByCondition.type,
        data
      ).then((res) => {
        if (res.retStatus === '1') {
          this.relByConditionTableData = res.retData.results;
          this.totalNum1 = res.retData.totalNum;
        }
      });
    },
    // 删除关联商品
    deleteProductBt (row) {
      let data = {
        orgSkuNos: row.productUuid,
        skuNo: this.skuNo,
        type: this.type // 类型 1相同 2 成套 3 相关
      };
      // 开始请求商品列表
      ApiRequest(
        this.requestApi.deleteProductOrg.url +
          '?skuNo=' +
          this.skuNo +
          '&type=' +
          this.type +
          '&orgSkuNos=' +
          row.skuNo,
        this.requestApi.deleteProductOrg.type,
        data
      ).then((res) => {
        if (res.retStatus === '1') {
          this.getRelByCondition();
        }
      });
    },
    // 点击关联按钮
    relByConditionBt () {
      this.modal1 = true;
      this.searchData.productName = '';
      this.searchData.spuCode = '';
      this.searchData.skuCode = '';
      this.nowPage1 = 1;
      this.pageShow1 = 10;
      this.getNotRelByCondition();
    },
    // 关联操作
    guanlian () {
      let data = {
        orgSkuNos: this.skuNos.join(','),
        skuNo: this.skuNo,
        type: this.type // 类型 1相同 2 成套 3 相关
      };
      // 开始请求商品列表
      ApiRequest(
        this.requestApi.createProductOrg.url +
          '?skuNo=' +
          this.skuNo +
          '&type=' +
          this.type +
          '&orgSkuNos=' +
          this.skuNos.join(','),
        this.requestApi.createProductOrg.type,
        data
      ).then((res) => {
        if (res.retStatus === '1') {
          this.getRelByCondition();
        }
      });
    },
    // 表格选中操作
    tableSelectChage (row) {
      row.forEach((element) => {
        this.skuNos.push(element.skuNo);
      });
    },
    handleChangePage (val) {
      this.pageShow = val;
      this.$nextTick(() => {
        this.getRelByCondition();
      });
    },
    handleChangePage1 (val) {
      this.pageShow1 = val;
      this.$nextTick(() => {
        this.getNotRelByCondition();
      });
    },
    goBack () {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.colclass {
  height: 30px;
  line-height: 30px;
  margin-right: 80px;
}

.absoluteBtn {
  position: absolute;
  top: 0;
  right: -150px;
}

.tableTitle {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
}
</style>
